<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 网格布局</title>
    <style>
      h3 {
        width: 500px;
        margin: 20px auto;
      }
      .container {
        width: 500px;
        margin: 20px auto;
        border: 1px solid black;
        display: grid;
      }
      .item {
        border: 1px solid red;
      }
      .fix-size {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h3>绝对尺寸</h3>
    <div
      class="container"
      style="
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: 100px 100px 100px;
      "
    >
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <h3>相对尺寸(fr)</h3>
    <div
      class="container"
      style="
        grid-template-columns: 100px 1fr 2fr;
        grid-template-rows: 100px 100px 100px;
      "
    >
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <h3>自动尺寸</h3>
    <div
      class="container"
      style="
        grid-template-columns: 100px auto auto;
        grid-template-rows: 100px 100px 100px;
      "
    >
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <h3>项目属性</h3>
    <div
      class="container"
      style="
        height: 300px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
      "
    >
      <div class="item" style="grid-row: 1 / 4">1</div>
      <div class="item">2</div>
      <div class="item" style="grid-row: 3 / 5">3</div>
      <div class="item">4</div>
    </div>
    <h3>
      容器内部的对齐方式 place-items space-around(垂直方向) space-around(方向 |
      start | end | center)
    </h3>
    <div
      class="container"
      style="
        height: 300px;
        grid-template-columns: 100px auto 100px;
        grid-template-rows: 100px 100px 100px;
        place-items: center center;
        place-content: space-around space-around;
      "
    >
      <div class="item fix-size">1</div>
      <div class="item fix-size">2</div>
      <div class="item fix-size">3</div>
      <div class="item fix-size">4</div>
    </div>
  </body>
</html>
